<style lang="scss">
@import './index.scss';
</style>

<template>
  <div class="rechargeBox">
    <van-nav-bar title="充值" left-arrow @click-left="onClickLeft" />
    <div class="rechargeTop">
      <h4>充值金额</h4>
      <p>
        ￥<input type="text" v-model="moneyA" />
        <span style="font-size: 10px"
          >本次可获得 <span style="color: #d92109; font-size: 12px">{{ moneyA * 100 }}</span
          >H币</span
        >
      </p>
    </div>
    <div class="rechargeCon">
      <h6 style="color: #999">最低充值1元，1元可兑换100H币。</h6>
      <div class="rechargeFoot">
        <h3>选择充值方式</h3>
        <div>
          <dl style="display: flex; align-items: center; justify-content: space-between">
            <dt style="margin-top: 10px">微信支付</dt>
            <dd>
              <van-checkbox v-model="checked1" />
            </dd>
          </dl>
          <dl style="display: flex; align-items: center; justify-content: space-between">
            <dt style="margin-top: 10px">支付宝支付</dt>
            <dd>
              <van-checkbox v-model="checked2" />
            </dd>
          </dl>
        </div>
      </div>
    </div>
    <van-button style="margin: 30px 20px; width: 90%" type="primary" @click="cz">充值</van-button>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const checked1 = ref(false)
const checked2 = ref(false)
// 使浏览器回到上一个访问的页面，实现类似于 “返回” 的功能
const onClickLeft = () => history.back()
// const moneyA = ref()

// let num = ref(localStorage.getItem('num') || 0)
const moneyA:any = ref(0)

const cz = () => {
    if (moneyA.value <= 0) {
        return
    } else {
      // num.value += moneyA.value
//     // localStorage.setItem('num', num.value.toString())
        localStorage.setItem('moneyA', moneyA.value)
        // localStorage.setItem('moneyA', JSON.stringify(moneyA.value))
        router.push('/success')
    }
}
</script>
